<template>
  <v-tabs color="primary" dark grow>
    <v-tab ripple>
      application/json
    </v-tab>
    <v-tab-item>
      <v-card>
        <v-card-text>
          <snippet class="display-1" language="javascript" style="width: 100%">
            {
              "credential": {
                "username": "foo",
                "password": "bar"
              }
            }
          </snippet>
        </v-card-text>
      </v-card>
    </v-tab-item>


    <v-tab ripple>
      application/x-www-form-urlencoded
    </v-tab>
    <v-tab-item>
      <v-card width="100%">
        <v-card-text>
          <flipper style="width: 100%">
            <div slot="face">
              <h3 class="display-3">Spring风格</h3>
              <snippet class="display-1">
                credential.username=foo&amp;credential.password=bar
              </snippet>
            </div>
            <div slot="back">
              <h3 class="display-3">jQuery风格</h3>
              <snippet class="display-1">
                credential[username]=foo&amp;credential[password]=bar
              </snippet>
            </div>
          </flipper>
        </v-card-text>
      </v-card>
    </v-tab-item>

    <v-tab ripple>
      multipart/form-data
    </v-tab>
    <v-tab-item>
      <v-card width="100%">
        <v-card-text>
          <flipper style="width: 100%">
            <div slot="face">
              <h3 class="display-3">请求头Content-Type</h3>
              <snippet class="display-1">
                Content-Type: multipart/form-data; <span class="success--text">boundary=abcd1234</span>
              </snippet>
            </div>
            <div slot="back">
              <h3 class="display-3">请求Body</h3>
              <snippet class="display-1">
                --abcd1234
                Content-Disposition: form-data; name="credential[username]"
                
                foo
                --abcd1234
                Content-Disposition: form-data; name="credential[password]"
                
                bar
                --abcd1234
                Content-Disposition: form-data; name="credential[avatar]"
                Content-Type: image/png
                Content-Length: 12345678
                
                [二进制数据]
                --abcd1234--
              </snippet>
            </div>
          </flipper>
        </v-card-text>
      </v-card>
    </v-tab-item>
  </v-tabs>
</template>

<script>
import Flipper from '@/components/Flipper'
import Snippet from '@/components/Snippet'

export default {
  components: {Flipper, Snippet}
}
</script>
